<!--<template>-->
<!--  <div>-->
<!--    <div class="topBtn">-->
<!--      <div class="sizeBig"><span>维修申请</span></div>-->
<!--    </div>-->
<!--    <div class="message">-->
<!--      <p class="character">工位电脑扫描Fail的异常件，统一到产线的维修工位来集中处理。处理完成后判定PASS才能重新流回产线（选择工位）进行生产。<span class="skip">查看帮助文档</span>-->
<!--      </p>-->
<!--    </div>-->

<!--    <div class="scanning">-->
<!--      <h4>扫描区</h4>-->
<!--      <div>-->
<!--        <span>扫描SN条码：</span>-->
<!--        <el-input v-model="productCode" placeholder="请扫描SN条码带出产品信息" @keydown.native.enter="getProduct"-->
<!--                  clearable></el-input>-->
<!--      </div>-->
<!--    </div>-->

<!--    <div class="workstation">-->
<!--&lt;!&ndash;      <div>&ndash;&gt;-->
<!--&lt;!&ndash;        <h4>工位信息展示</h4>&ndash;&gt;-->
<!--&lt;!&ndash;        <el-select v-model="lineId" placeholder="请选择线体" @change="getStation">&ndash;&gt;-->
<!--&lt;!&ndash;          <el-option&ndash;&gt;-->
<!--&lt;!&ndash;            v-for="(item,index) in options"&ndash;&gt;-->
<!--&lt;!&ndash;            :key="index"&ndash;&gt;-->
<!--&lt;!&ndash;            :label="item.Name"&ndash;&gt;-->
<!--&lt;!&ndash;            :value="item.LineId">&ndash;&gt;-->
<!--&lt;!&ndash;          </el-option>&ndash;&gt;-->
<!--&lt;!&ndash;        </el-select>&ndash;&gt;-->
<!--&lt;!&ndash;      </div>&ndash;&gt;-->

<!--      &lt;!&ndash;            <ul>&ndash;&gt;-->
<!--      &lt;!&ndash;                <li>&ndash;&gt;-->
<!--      &lt;!&ndash;                    <div>&ndash;&gt;-->
<!--      &lt;!&ndash;                        <li>&ndash;&gt;-->
<!--      &lt;!&ndash;                            <h5>工位名称：</h5>&ndash;&gt;-->
<!--      &lt;!&ndash;                            <span>{{workStationData.Name}}</span>&ndash;&gt;-->
<!--      &lt;!&ndash;                        </li>&ndash;&gt;-->
<!--      &lt;!&ndash;                        <li>&ndash;&gt;-->
<!--      &lt;!&ndash;                            <h5>工位线体：</h5>&ndash;&gt;-->
<!--      &lt;!&ndash;                            <span>{{workStationData.LineName}}</span>&ndash;&gt;-->
<!--      &lt;!&ndash;                        </li>&ndash;&gt;-->
<!--      &lt;!&ndash;                        <li>&ndash;&gt;-->
<!--      &lt;!&ndash;                            <h5>所属车间：</h5>&ndash;&gt;-->
<!--      &lt;!&ndash;                            <span>{{workStationData.WorkShopName}}</span>&ndash;&gt;-->
<!--      &lt;!&ndash;                        </li>&ndash;&gt;-->
<!--      &lt;!&ndash;                        <li>&ndash;&gt;-->
<!--      &lt;!&ndash;                            <h5>操作员：</h5>&ndash;&gt;-->
<!--      &lt;!&ndash;                            <span>{{workStationData.LastModifyBy}}</span>&ndash;&gt;-->
<!--      &lt;!&ndash;                        </li>&ndash;&gt;-->
<!--      &lt;!&ndash;                    </div>&ndash;&gt;-->
<!--      &lt;!&ndash;                </li>&ndash;&gt;-->
<!--      &lt;!&ndash;                <li>&ndash;&gt;-->
<!--      &lt;!&ndash;                    <div>&ndash;&gt;-->
<!--      &lt;!&ndash;                        <li>&ndash;&gt;-->
<!--      &lt;!&ndash;                            <h5>送修工位：</h5>&ndash;&gt;-->
<!--      &lt;!&ndash;                            <span></span>&ndash;&gt;-->
<!--      &lt;!&ndash;                        </li>&ndash;&gt;-->
<!--      &lt;!&ndash;                        <li>&ndash;&gt;-->
<!--      &lt;!&ndash;                            <h5>排程号：</h5>&ndash;&gt;-->
<!--      &lt;!&ndash;                            <span></span>&ndash;&gt;-->
<!--      &lt;!&ndash;                        </li>&ndash;&gt;-->
<!--      &lt;!&ndash;                        <li>&ndash;&gt;-->
<!--      &lt;!&ndash;                            <h5>产品规格：</h5>&ndash;&gt;-->
<!--      &lt;!&ndash;                            <span>{{productData.Describe}}</span>&ndash;&gt;-->
<!--      &lt;!&ndash;                        </li>&ndash;&gt;-->
<!--      &lt;!&ndash;                        <li>&ndash;&gt;-->
<!--      &lt;!&ndash;                            <h5>产品名称：</h5>&ndash;&gt;-->
<!--      &lt;!&ndash;                            <span>{{productData.Name}}</span>&ndash;&gt;-->
<!--      &lt;!&ndash;                        </li>&ndash;&gt;-->
<!--      &lt;!&ndash;                    </div>&ndash;&gt;-->
<!--      &lt;!&ndash;                </li>&ndash;&gt;-->
<!--      &lt;!&ndash;                <li>&ndash;&gt;-->
<!--      &lt;!&ndash;                    <div>&ndash;&gt;-->
<!--      &lt;!&ndash;                        <li>&ndash;&gt;-->
<!--      &lt;!&ndash;                            <h5 class="today">今日维修数：</h5>&ndash;&gt;-->
<!--      &lt;!&ndash;                            <span></span>&ndash;&gt;-->
<!--      &lt;!&ndash;                        </li>&ndash;&gt;-->
<!--      &lt;!&ndash;                    </div>&ndash;&gt;-->
<!--      &lt;!&ndash;                </li>&ndash;&gt;-->
<!--      &lt;!&ndash;            </ul>&ndash;&gt;-->
<!--      <AzureDynamicTable :data="stationTable" :column-des-objs="stationColumnDesObjs">-->
<!--        <template slot="tableHead">-->
<!--          <h4>工位信息展示</h4>-->
<!--&lt;!&ndash;          <el-select v-model="lineId" placeholder="请选择线体" @change="getStation">&ndash;&gt;-->
<!--&lt;!&ndash;            <el-option&ndash;&gt;-->
<!--&lt;!&ndash;              v-for="(item,index) in options"&ndash;&gt;-->
<!--&lt;!&ndash;              :key="index"&ndash;&gt;-->
<!--&lt;!&ndash;              :label="item.Name"&ndash;&gt;-->
<!--&lt;!&ndash;              :value="item.LineId">&ndash;&gt;-->
<!--&lt;!&ndash;            </el-option>&ndash;&gt;-->
<!--&lt;!&ndash;          </el-select>&ndash;&gt;-->
<!--          <a-select :options="options" v-model="lineId" placeholder="请选择线体" @change="getStation"></a-select>-->
<!--        </template>-->
<!--      </AzureDynamicTable>-->


<!--    </div>-->
<!--    <div class="photoMes">-->
<!--&lt;!&ndash;      <h4>照片详情</h4>&ndash;&gt;-->
<!--&lt;!&ndash;      <el-table :data="tableData" border style="width: 95%;margin:0 auto;" height="200px"&ndash;&gt;-->
<!--&lt;!&ndash;                @selection-change="selectionChange" :header-cell-style="{background:'#f4f4f4'}">&ndash;&gt;-->
<!--&lt;!&ndash;        <el-table-column fixed type="selection" align="center" width="55"></el-table-column>&ndash;&gt;-->
<!--&lt;!&ndash;        <el-table-column type="index" align="center" label="序号" width="55"></el-table-column>&ndash;&gt;-->
<!--&lt;!&ndash;        <el-table-column prop="FileName" align="center" label="照片名称" width="180"></el-table-column>&ndash;&gt;-->
<!--&lt;!&ndash;        <el-table-column prop="OrderFileCode" align="center" label="照片编码" width="180"></el-table-column>&ndash;&gt;-->
<!--&lt;!&ndash;        <el-table-column prop="CompressPath" label="照片路径">&ndash;&gt;-->
<!--&lt;!&ndash;          <template slot-scope="scope">&ndash;&gt;-->
<!--&lt;!&ndash;            <span @click="lookPhoto(scope.row)" style="color:#0095FF;cursor:pointer;">{{scope.row.CompressPath}}</span>&ndash;&gt;-->
<!--&lt;!&ndash;          </template>&ndash;&gt;-->
<!--&lt;!&ndash;        </el-table-column>&ndash;&gt;-->
<!--&lt;!&ndash;      </el-table>&ndash;&gt;-->
<!--      <AzureDynamicTable :data="imgTable" :column-des-objs="imgColumnDesObjs" :show-seq="true">-->
<!--        <template slot="tableHead">-->
<!--                <h4>照片详情</h4>-->
<!--        </template>-->
<!--      </AzureDynamicTable>-->

<!--    </div>-->
<!--    <div class="abnormal">-->
<!--      <h4>异常处理区</h4>-->
<!--      <div class="table">-->
<!--        <Table :productCode="productCode"></Table>-->
<!--      </div>-->
<!--    </div>-->
<!--    &lt;!&ndash; 照片弹出框 &ndash;&gt;-->
<!--    <el-dialog class="dialog" center :visible.sync="photoDialogVisible" :close-on-click-modal='false' width="350px">-->
<!--      <div class="thumbs">-->
<!--        <vue-preview :slides="slide1"></vue-preview>-->
<!--      </div>-->
<!--    </el-dialog>-->
<!--  </div>-->
<!--</template>-->

<template>
  <InsideRework/>
</template>

<script>
  import {
    getWorkStationInfo //获取工位信息
  } from '@/api/scan'
  import { getUserLineList } from '@/api/linebody'
  import { getScanMainProductInfo } from '@/api/maintain'  // 获取订单产品信息
  import Table from './components/maintainForm'
  import AzureDynamicTable from '@/components/ATheFridayClub/mDynamicTable/AzureDynamicTable'
  import ASelect from '@/components/ATheFridayClub/ASelect'

  import InsideRework from './components/insideRework'
  export default {
    name: 'maintain',
    components: {
      Table, AzureDynamicTable,ASelect,InsideRework
    },
    data() {
      return {
        lineId: '',
        options: [],
        productCode: '',  //扫描的条码
        workStationData: '', // 工位信息数据
        productData: {}, //产品数据
        tableData: [], //照片详情表
        slide1: [],
        checkIds: [], //勾选的照片编码
        photoDialogVisible: false,
        stationTable:[],
        stationColumnDesObjs:[
          {label:'工位名称',key:''},
          {label:'工位线体',key:''},
          {label:'所属车间',key:''},
          {label:'操作员',key:''},
          {label:'送修工位',key:''},
          {label:'产品条码',key:''},
          {label:'产品名称',key:''},
          {label:'产品规格',key:''},
          {label:'今日维修书',key:''},
        ],
        imgTable:[], //照片详情表格
        imgColumnDesObjs:[
          {label:'照片名称',key:''},
          {label:'照片条码',key:''},
          {label:'照片路径',key:''},
          {label:'组件条码',key:''},
        ],

      }
    },
    mounted() {
      this.init()
    },
    methods: {
      init() {
        //获取线体
        getUserLineList({ keyName: '', lineType: -1 }).then(res => {
          if (parseInt(res.Code) === 1) {
            this.options = res.Result
          }
        })
      },
      getStation() {

        //获取本机电脑IP地址
        var RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection
          || window.mozRTCPeerConnection
        if (RTCPeerConnection) {
          (() => {
            var rtc = new RTCPeerConnection()
            rtc.createDataChannel('')//创建一个可以发送任意数据的数据通道
            rtc.createOffer(offerDesc => {  //创建并存储一条sdp数据
              rtc.setLocalDescription(offerDesc)
            }, e => {
            })
            rtc.onicecandidate = (evt) => {   //监听candidate事件
              // console.log(evt)
              if (evt.candidate && evt.candidate.foundation == 25531464) {
                var ip_addr = evt.candidate.address
                // console.log(this.ip_addr)
                localStorage.setItem('ip_addr', ip_addr)
              }
            }
          })()
        }
        var ipaddress = localStorage.getItem('ip_addr')
        //通过电脑IP地址获取当前工位信息
        getWorkStationInfo({ ipAddress: ipaddress, techType: 16, lineId: parseInt(this.lineId) }).then(res => {
          if (parseInt(res.Code) === 1) {
            this.workStationData = res.Result
          }
        }).catch(res => {

        })
      },
      //通过扫描条码带出产品信息
      getProduct() {
        if (this.lineId == '') {
          this.$message('请选择线体')
          this.productCode = ''
          return
        } else {
          getScanMainProductInfo({ productCode: this.productCode }).then(res => {
            if (parseInt(res.Code) === 1) {
              this.productData = res.Result[0]
              this.tableData.push(this.productData)
              if (this.tableData.length > 1) {
                if (this.productData.OrderProductPartId !== this.tableData[0].OrderProductPartId) {
                  this.$message('当前扫描照片组件不一致')
                  this.tableData.pop()
                } else {
                  this.tableData = this.tableData
                }
                // for(var i=0; i<this.tableData.length;i++){
                //     if(this.productData.OrderFileCode==this.tableData[i].OrderFileCode){
                //         this.$message('扫描照片重复')
                //         this.tableData.pop()
                //     }else{
                //         this.tableData = this.tableData
                //     }
                // }
              }
              this.productCode = ''
            }

          }).catch(res => {
            this.productCode = ''
          })
        }

      },
      lookPhoto(row) {

        this.slide1 = []
        this.slide1.push(row)
        this.slide1.forEach(item => {
          item.src = item.CompressPath
          item.msrc = item.CompressPath
          item.alt = item.FileName
          item.title = item.FileName
          item.w = 600
          item.h = 800
        })
        this.photoDialogVisible = true
      },
      selectionChange(val) {
        // console.log(val)
        this.checkIds = []
        val.forEach(el => {
          this.checkIds.push(el.OrderFileId)

        })
        console.log(this.checkIds)
      }
    }
  }
</script>

<style scoped lang="scss">
  .sizeBig {
    font-size: 16px;
  }

  .topBtn {
    height: 60px;
    width: 98%;
    margin: 0 auto;
    line-height: 60px;
    display: flex;
    justify-content: space-between;
  }

  .message {
    width: 98%;
    margin: 0 auto;
    height: 70px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(238, 238, 238, 1);
    font-size: 14px;

    .character {
      margin: 20px 0 21px 20px;
      color: #999999;

      .skip {
        color: #0095FF;
        margin-left: 10px;
        cursor: pointer;
      }
    }
  }

  .scanning {
    width: 98%;
    margin: 0 auto;
    height: 104px;
    margin-top: 20px;
    border: 1px solid #eee;

    h4 {
      font-size: 14px;
      font-weight: 600;
      padding: 17px 0 0 22px;
      height: 50px;
    }

    div {
      width: 60%;
      margin: 0 auto;

      .el-input {
        width: 240px;
      }
    }
  }

  .workstation {
    width: 98%;
    margin: 0 auto;
    height: 182px;
    margin-top: 20px;
    border: 1px solid #eee;

    div {
      h4 {
        float: left;
        font-size: 14px;
        font-weight: 600;
        padding: 17px 0 0 22px;
      }

      .el-select {
        margin-left: 20px;
        margin-top: 10px;
        width: 150px;
      }
    }

    ul {
      display: flex;
      width: 65%;
      margin: 0 auto;

      li {
        flex: 1;
        margin-right: 20px;

        li {
          width: 100%;
          height: 20px;
          margin: 10px 0 0 20px;

          h5 {
            float: left;
            font-size: 14px;
            font-weight: 500;
            line-height: 20px;
            text-align-last: justify;
            width: 70px;
          }

          span {
            float: left;
            // width: 140px;
            line-height: 20px;
          }

          .today {
            width: 90px;
          }
        }
      }
    }
  }

  .photoMes {
    width: 98%;
    height: 270px;
    margin: 0 auto;
    margin-top: 20px;
    border: 1px solid #eee;

    h4 {
      font-size: 14px;
      font-weight: 600;
      padding: 17px 0 0 22px;
      height: 53px;
    }
  }

  .abnormal {
    position: relative;
    width: 98%;
    margin: 0 auto;
    height: 514px;
    margin-top: 20px;
    border: 1px solid #eee;

    h4 {
      font-size: 14px;
      font-weight: 600;
      padding: 17px 0 0 22px;
      height: 53px;
    }

    .table {
      position: absolute;
      left: 15%;
      width: 400px;
      // margin-left: -250px;
      // margin-top: 50px;

    }
  }

  .dialog {
    margin-top: 200px;
    margin-left: 100px;

    .thumbs {
      margin: 0 auto;
      width: 90%;
    }
  }
</style>
